<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Mailmanagement">邮件管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <div style="display: flex;padding: 0 60px;" class="top">
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          发件人:
          <el-input
            v-model="input"
            placeholder="请输入发件人"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>

        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          收件人:
          <el-input
            v-model="input1"
            placeholder="请输入收件人"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          主题:
          <el-input
            v-model="input2"
            placeholder="请输入主题"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>

        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>
      <div class="le">
        <el-table ref="multipleTableRef" :data="list" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="发件人" width="270" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.fa }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收件人" width="270" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.shou }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="主题" width="270">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.zhu }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" width="270">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.data }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :page-size="10" :total="length"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { youlist, youshan,yousou } from '../../api'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const list = ref()
    const input = ref('')
    const input1 = ref('')
    const token1=localStorage.getItem('token1')
    const input2 = ref('')
    const data = ref('')
        var d = new Date();  //获取时间
        var hour = d.getHours(); //获取小时
        var minute = d.getMinutes();//获取分 bn
        var second = d.getSeconds();//获取秒
        console.log(d.getFullYear()); //年
        console.log(d.getMonth() + 1);  //月
        console.log(d.getDate())   //日
        console.log(hour, minute, second);  //小时分钟秒
 data.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) +'-' + d.getDate() + ' '+' ' + hour + ':' + minute + ':' + second

    onMounted(() => {
      // 列表
      youlist().then(res => {
        console.log(res);
        list.value = res.data.data
      })
    })
    // 删除
    const handleDelete = (id: any, v: any) => {
      if (token1 === '管理员') {
        youshan(v).then(res => {
          console.log(res);
          youlist().then(res => {
            console.log(res);
            list.value = res.data.data
          })
        })
      } else {
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    //  搜索
    const sou=()=>{
      yousou({input,input1,input2,data}).then(res=>{
        console.log(res);
        list.value = res.data.data
      })
    }

    const chong=()=>{
      input2.value=''
      input1.value=''
      input.value=''
      youlist().then(res => {
            console.log(res);
            list.value = res.data.data
          })
    }
    return {
      list,
      input,
      input1,
      input2,
      handleDelete,
      sou,
      chong
    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}

.top {
  width: 90%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
</style>
